<jsp:include page="/WEB-INF/jsp/common/_head.jsp"></jsp:include>
<body style="position:relative;overflow-x:hidden;opacity:0;">
<script type="text/javascript">
  var atomic_scales = [];
  var code = "";

  $(document).ready(function() {
    var params = util.getUrlParameters();
    code = params.code ? decodeURI(util.getUrlParameters().code) : "";
    $.each($(".atomic_scale"), function(i, div) {
      var as = new AtomicScale($(div));
      atomic_scales.push(as);
      as.start();
    });

    $("body").bind("update_score", updateScore);

/*
    var a = $(".tabs ul li a");
    $.each(a, function(i, n) {
      var href = $(n).attr("href");
      if (href && href == window.location.hash) {
        $("body").scrollTop();
      }
    });
*/
/*
    a.click(function(event) {
      window.location.hash = this.hash;
    });
*/
  });

  function updateScore() {
    var score = 0;
    var record = true;
    for (var i = 0; i < atomic_scales.length; i++) {
      var as = atomic_scales[i];
      if (!as.complete) {
        record = false;
      } else {
        switch(as.attempts) {
          case 1 : score += 20; break;
          case 2 : score += 15; break;
          case 3 : score += 10; break;
          default : score += 5; break;
        }
      }
    }
    $("#score").html(score);
    if (code && record) {
      $.post("/lab/record_score", { code : code, score : score },
        function(response) { alert(response); });
      var x = 0;
    }
  }

  function showPeriodicTable() {
    var ptp = $("#pt_popup");
    var ctx = ptp.find("canvas")[0].getContext("2d");
    var width = ctx.canvas.width + 34;
    var height = ctx.canvas.height + 55;
    ptp.dialog({ title : "Periodic Table",
      position : [0.5 * ($(window).width() - width), 64], width : width, height : height,
      resizable : false, modal : true });
    ctx.drawPeriodicTable();
  }

  function showPeriodicSquare() {
    var psp = $("#ps_popup");
    var ctx = psp.find("canvas")[0].getContext("2d");
    var width = ctx.canvas.width + 34;
    var height = ctx.canvas.height + 55;
    psp.dialog({ title : "Periodic Square",
      position : [0.5 * ($(window).width() - width), 64], width : width, height : height,
      resizable : false, modal : true });
    ctx.drawPeriodicSquare(s2e["H"],0,0,200);
  }
</script>
<style type="text/css">
  canvas.square { margin-left : 20px; }
  div.atomic_scale { width : 800px; height : 192px; }
  a.popup { color : rgba(0,64,96,0.75); font-weight : bold; text-decoration : underline; cursor : pointer; }
  a.popup:hover { color : rgba(0,64,96,1); }
</style>
<div id="periodic_squares" class="tabs">
  <button id="home" onclick="window.location.href = '/';">Home</button>
  <div id="score">0</div>
  <ul>
    <li><a href="#learning_aims">Learning Aims</a></li>
    <li><a href="#periodic_table">Periodic Table</a></li>
    <li><a href="#squares">Periodic Squares</a></li>
  </ul>
  <div id="learning_aims" style="width:800px;margin:0 auto;">
    <div id="pt_popup" class="d-none">
      <canvas width="720px" height="420px"></canvas>
    </div>
    <div id="ps_popup" class="d-none">
      <canvas width="200px" height="200px"></canvas>
    </div>
    <ul>
      <li>
        There are about 120 different elements (as shown by a
        <a class="popup" onclick="showPeriodicTable();">Periodic Table</a>
        with
        <a class="popup" onclick="showPeriodicSquare();">Periodic Squares</a>).
      </li>
      <li>
        Elements have names and symbols (shown in the Periodic Squares)
      </li>
      <li>
        Periodic squares also show two other numbers that help describe each element:
        <ol style="padding-left:32px;">
          <li>the atomic mass (the bigger number).</li>
          <li>the atomic number</li>
        </ol>
      </li>
      <li>
        The atomic mass is equal to the sum of the masses of the protons,
        neutrons and electrons (the latter having negligible mass)
      </li>
      <li>
        Protons and neutrons are similar sub-atomic particles and they each have a mass of 1.0.
        <br/>
        (You'll learn more about their different characteristics in the next lesson.)</li>
    </ul>
    <div class='a-center'>
      <button style="margin-top:8px;"
              onclick="$('a[href=#periodic_table]').click();">Continue</button>
    </div>
<%--
    <h4><a name="" href="">Learning Aims</a></h4>
    <div>
    </div>
    <h4><a name="greek_philosophers" href="#greek_philosophers">Greek Philosophers</a></h4>
    <div>
      <p>
        Greek philosophers didn't have the technology we have today so they tried to understand the world by observing it, thinking about it, and discussing it with their philosopher friends.
      </p>
      <p>
        A greek philosopher by the name of Empedocles (492 BC - 432 BC) liked thinking about matter (the "stuff" of the world) and suggested that the world around us was made of just four elements : earth, water, wind, and fire.
      </p>
      <p>
        Another greek philosopher by the name of Democritus (450 BC - 370 BC) suggested that if one were to divide matter into smaller and smaller pieces then eventually one would come to pieces so small they couldn't be divided anymore. He named these pieces atoms, which meant "indivisible" in ancient greek.
      </p>
      <p>
        A much more famous greek philosopher by the name of Aristotle (384 BC - 322 BC) had a different view of matter. He argued that if the elements were made of small particles (atoms) than they would all fall to Earth like larger objects and could never rise the way that air or fire does. He theorized that one could divide matter indefinitely and forever get smaller and smaller pieces.
      </p>
      <p>
        Modern science shows that just one of these three philosophers had the right idea about the structure of matter. Can you guess which?
      </p>
    </div>
    <h4><a name="scientific_revolution" href="#scientific_revolution">Scientific Revolution</a></h4>
    <div>
      <p>
        Even though Democritus had the right idea about the structure of matter, his atomist theory was rejected for nearly two thousand years in favor of Aristotle's view until the Scientific Revolution of the 16th and 17th century.
      </p>
      <p>
        A French scientist by the name of Pierre Gassendi (1592 - 1655) expanded on Democritus' idea of indivisible  atoms. From the observations and experiments of other scientists as well as his own, Gassendi reasoned that atoms came in a large variety of shapes. Furthermore, he theorized  that the way atoms interacted with each other was responsible for the differences in the physical properties of the elements.
      </p>
    </div>
--%>
  </div>
  <div id="periodic_table">
    <div style="width:800px;margin:0 auto;">
      <ul>
        <li>
          The 120 or so elements that have been discovered so far and that make up all matter, living and non-living,
          can be arranged in the form of a "Periodic Table" (below).
        </li>
        <li>
          We shall learn why this table was designed, how it is used, and about many of the elements shown in the table's "Periodic Squares" in other activities.
        </li>
        <li>
          In this activity you will focus on learning about the Periodic Squares shown in this table.
        </li>
      </ul>
      <div class='a-center'>
        <button style="margin-top:8px;"
                onclick="$('a[href=#squares]').click();">Continue</button>
      </div>
      <hr />
    </div>
    <div class="p-relative" style="width:920px;margin:0 auto;">
      <canvas id="pt" width="2760px" height="1620px" style="width:920px;height:540px;"></canvas>
      <canvas id="pt_zoom" width="256px" height="256px" class="p-absolute d-none"
              style="left:0;top:0;border-radius:128px;border:1px black solid;"></canvas>
      <div id="pt_mouse" class="p-absolute" style="left:0;top:0;width:920px;height:540px;"></div>
    </div>
    <script type="text/javascript">
      var pt = {};
      $(document).ready(function() {
        pt.c = $("#pt");
        pt.c[0].getContext("2d").drawPeriodicTable();
        pt.img = document.createElement("img");
        pt.img.src = pt.c[0].toDataURL("image/png");
        pt.z = $("#pt_zoom");
        pt.z.w = pt.z[0].width;
        pt.z.h = pt.z[0].height;
        pt.z.ctx = pt.z[0].getContext("2d");
        pt.m = $("#pt_mouse");
        pt.m.w = pt.m.width();
        pt.m.h = pt.m.height();
        pt.m.mouseover(function(event) { pt_over(event); });
        pt.m.mousemove(function(event) { pt_move(event); });
        pt.m.mouseout(function(event) { pt_out(event); });
      });

      function pt_over(event) {
        pt.m.css({ cursor : "none" });
        pt.z.show();
      }

      function pt_move(event) {
        var left = event.offsetX - 0.5 * pt.z.w + 0.08 * (0.5 * pt.m.w - event.offsetX);
        var top = event.offsetY - 0.5 * pt.z.h + 0.08 * (0.5 * pt.m.h - event.offsetY);
        pt.z.css({ left : left, top : top });
        pt.z.ctx.fillStyle = "rgb(240,240,240)";
        pt.z.ctx.fillRect(0, 0, pt.z.w, pt.z.h);
        var x = -3 * event.offsetX + 0.5 * pt.z.w;
        var y = -3 * event.offsetY + 0.5 * pt.z.h;
        pt.z.ctx.drawImage(pt.img, x, y);
      }

      function pt_out(event) {
        pt.m.css({ cursor : "default" });
        pt.z.hide();
      }
    </script>
  </div>
  <div id="squares" class="accordion" style="width:940px;">
    <h4><a name="helium" href="#helium">Helium</a></h4>
    <div>
      <table>
        <tr>
          <td>
            <p>
              The periodic square on the right tells us the element's name (Helium), symbol (He), atomic number (2), and atomic mass (4.00) in atomic mass units (amu).
            </p>
            <p>
              Protons and neutrons are particles in the atoms of every element.
            </p>
            <p>
              Together they make up almost all of the element's atomic mass (see He's periodic square).
            </p>
            <p>
              Each proton and each neutron has a mass of 1.0 atomic mass unit (amu).
            </p>
            <p>
              The atomic mass (in amu) equals the number of protons plus neutrons.
            </p>
            <p>
              The atomic number in the periodic square tells us the number of protons in each of that element's atoms.
            </p>
          </td>
          <td>
            <canvas class="square" width="160px" height="160px" symbol="He" name="Helium" number="2" mass="4.00"></canvas>
          </td>
        </tr>
      </table>
      <hr />
      <table>
        <tr>
          <td style="width:64px;"></td>
          <td>
            <p>
              Add protons to the scale until the scale reading is equal to He's atomic number.
            </p>
            <p>
              Then add neutrons until the mass of each He atom is approximately equal to its atomic mass (in amu).
            </p>
          </td>
          <td style="width:192px;"></td>
        </tr>
        <tr>
          <td colspan="3">
            <div class="atomic_scale" protons="2" nucleons="4"></div>
          </td>
        </tr>
      </table>
    </div>
    <h4><a name="lithium" href="#lithium">Lithium</a></h4>
    <div>
      <table>
        <tr>
          <td>
            <p>
              The periodic square on the right tells us the element's name (Lithium), symbol (Li), atomic number (3), and atomic mass (6.94) in atomic mass units (amu).
            </p>
            <p>
              Protons and neutrons are particles in the atoms of every element.
            </p>
            <p>
              Together they make up almost all of the element's atomic mass (see Li's periodic square).
            </p>
            <p>
              Each proton and each neutron has a mass of 1.0 atomic mass unit (amu).
            </p>
            <p>
              The atomic mass (in amu) equals the number of protons plus neutrons.
            </p>
            <p>
              The atomic number in the periodic square tells us the number of protons in each of that element's atoms.
            </p>
          </td>
          <td>
            <canvas class="square" width="160px" height="160px" symbol="Li" name="Lithium" number="3" mass="6.94"></canvas>
          </td>
        </tr>
      </table>
      <hr />
      <table>
        <tr>
          <td style="width:64px;"></td>
          <td>
            <p>
              Add protons to the scale until the scale reading is equal to Li's atomic number.
            </p>
            <p>
              Then add neutrons until the mass of each Li atom is approximately equal to its atomic mass (in amu).
            </p>
          </td>
          <td style="width:192px;"></td>
        </tr>
        <tr>
          <td colspan="3">
            <div class="atomic_scale" protons="3" nucleons="7"></div>
          </td>
        </tr>
      </table>
    </div>
    <h4><a name="beryllium" href="#beryllium">Beryllium</a></h4>
    <div>
      <table>
        <tr>
          <td>
            <p>
              The periodic square on the right tells us the element's name (Beryllium), symbol (Be), atomic number (4), and atomic mass (9.01) in atomic mass units (amu).
            </p>
            <p>
              Protons and neutrons are particles in the atoms of every element.
            </p>
            <p>
              Together they make up almost all of the element's atomic mass (see Be's periodic square).
            </p>
            <p>
              Each proton and each neutron has a mass of 1.0 atomic mass unit (amu).
            </p>
            <p>
              The atomic mass (in amu) equals the number of protons plus neutrons.
            </p>
            <p>
              The atomic number in the periodic square tells us the number of protons in each of that element's atoms.
            </p>
          </td>
          <td>
            <canvas class="square" width="160px" height="160px" symbol="Be" name="Beryllium" number="4" mass="9.01"></canvas>
          </td>
        </tr>
      </table>
      <hr />
      <table>
        <tr>
          <td style="width:64px;"></td>
          <td>
            <p>
              Add protons to the scale until the scale reading is equal to Be's atomic number.
            </p>
            <p>
              Then add neutrons until the mass of each Be atom is approximately equal to its atomic mass (in amu).
            </p>
          </td>
          <td style="width:192px;"></td>
        </tr>
        <tr>
          <td colspan="3">
            <div class="atomic_scale" protons="4" nucleons="9"></div>
          </td>
        </tr>
      </table>
    </div>
    <h4><a name="atomic_mass" href="#atomic_mass">Why isn't atomic mass a whole number?</a></h4>
    <div>
      <p>
        Most elements have two or more types of atoms with identical numbers of protons but varying numbers of neutrons.
        The difference in the number of neutrons causes the mass of an element's atoms to vary slightly.
        Since atomic mass is the average mass of it's atoms, these differences result in imprecise atomic mass.
      </p>
      <p>
        Most periodic tables such as the one shown in this lesson show the average atomic masses with great precision, e.g., He 4.002602 amu and
        Be, 9.012182 amu. These masses have been rounded off for this activity (as they are in most chemistry projects).
      </p>
    </div>
  </div>
</div>
</body>